<template>
  <view class="indexs">
    <view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
      <view
        class="header_height"
        :style="
          'height:' +
          gaodu +
          'px;line-height:' +
          gaodu +
          'px;top:' +
          gaodutops +
          'px;'
        "
      >
        <view class="index_h_cont3">
          <view class="index_wenben_img" @tap="jumpzuo">
            <image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
          </view>
          <view class="index_wenben baise">{{ words.team.title.value }}</view>
        </view>
      </view>
      <view class="coloe_title">s</view>
    </view>
    <view
      class="index_center"
      :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'"
    >
      <view class="my_pinzhenglist_center">
        <view class="index_swiper">
          <!--Tab布局-->
          <view class="index_title">
            <block v-for="(item, index) in malllist" :key="index">
              <view
                :data-id="index"
                :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')"
                @tap="getcurrentid"
              >
                <view class="mall_t1">{{ item.name }}</view>
              </view>
            </block>
            <view
              class="mys_xians_po"
              :style="'width:' + width + 'px;left:' + left + 'px;'"
            >
              <view class="mys_xians"></view>
            </view>
          </view>
          <!--内容布局-->
          <view class="index_list">
            <swiper
              class="swiper paid_list_cont"
              @change="pagechange"
              :current="currentIndex"
              :style="'height:' + height + ';'"
            >
              <block v-for="(item, index) in malllist" :key="index">
                <swiper-item style="height: 150px !important">
                  <view :class="'index_list_heji' + index">
                    <view class="my_tuandui_list" v-if="list">
                      <view
                        class="my_tuandui_cont"
                        v-for="(item, index) in list"
                        :key="index"
                      >
                        <view class="my_tuandui_cont_top">
                          <image
                            :src="item.user.avatarUrl"
                            mode="aspectFill"
                          ></image>
                          <view class="my_tuandui_cont_txt">
                            <view class="my_tuandui_cont_t1">{{
                              item["user"]["nickName"]
                            }}</view>
                            <view class="my_tuandui_cont_t2"
                              >{{ $t('page_my_tixianmx.phone_number') }}: {{
                                item["user"]["mobile"] != null
                                  ? item["user"]["mobile"]
                                  : $t("page_my_tixianmx.bind_phone")
                              }}</view
                            >
                            <view class="my_tuandui_cont_t2">{{
                              item["user"]["create_time"]
                            }}</view>
                          </view>
                        </view>
                        <view class="my_tuandui_cont_bottom">
                          <view class="my_tuandui_cont_bottom_l">
                            <view class="my_tuandui_cont_bottom_t1">
                              {{
                                $t("page_my_tixianmx.Contribution_income")
                              }}：<text
                                >{{ price_mode.unit
                                }}{{ item["order"]["income"] }}</text
                              >
                            </view>
                          </view>
                          <view class="my_tuandui_cont_bottom_l">
                            <view class="my_tuandui_cont_bottom_t2">
                              {{
                                $t("page_my_tixianmx.Singular_payment", {
                                  num: item["order"]["num"],
                                })
                              }}
                            </view>
                            <view class="my_tuandui_cont_bottom_t2"
                              >{{
                                $t("page_my_tixianmx.Transaction_amount")
                              }}：{{ price_mode.unit
                              }}{{ item["order"]["all_price"] }}</view
                            >
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="my_tuandui_kong" v-else>
                      <image :src="imgUrl + '/dzx_img160.png'"></image>
                      <text>{{ $t("page_my_tixianmx.hint") }}</text>
                      <view class="my_tuandui_kong_btns">{{
                        $t("page_my_tixianmx.invite")
                      }}</view>
                    </view>
                  </view>
                </swiper-item>
              </block>
            </swiper>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require("../../../utils/require");

export default {
  data() {
    return {
      navH: app.globalData.navHeight,
      gaodu: app.globalData.height,
      gaodutops: app.globalData.top,
      imgUrl: app.globalData.imgUrl,
      price_mode: uni.getStorageSync("price_mode"),
      malllist: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "今日新增",
        },
        {
          id: 3,
          name: "本周新增",
        },
      ],
      height: 0,
      heights: 0,
      currentIndex: 0,
      left: 16,
      false: false,
      width: 0,
      list: [],
      words: [],
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */ onLoad() {
    var that = this;
    that.changeline();
    that.getDearlerList();
  },
  onShow() {
    var that = this;
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    //swiper切换时会调用
    pagechange: function (e) {
      var that = this;
      that.currentIndex= e.detail.current
      that.swiperhegiht(e.detail.current);
      that.changeline();
    },

    //swiper单击事件
    getcurrentid(e) {
      this.currentIndex= e.currentTarget.dataset.id
      this.getDearlerList();
    },

    //swiper选项卡的高度
    swiperhegiht(es) {
      var that = this;
      var query = uni.createSelectorQuery();
      query.selectAll(".index_list_heji" + es).boundingClientRect();
      query.exec((res) => {
        var listHeight = res[0][0].height;
        that.height= listHeight + "px"
        that.heights= res[0]
      });
    },

    //下标线左右滑动效果
    changeline: function (e) {
      const query = uni.createSelectorQuery();
      var that = this;
      query.select(".mall_on").boundingClientRect();
      query.exec(function (res) {
        console.log(res, "????");
        if (res[0] != null) {
          that.left= res[0].left
          that.width= res[0].width
        } else {
          that.left= 0
        }
      });
    },
    getDearlerList() {
      var that = this;
      var data = {
        token: uni.getStorageSync("token"),
        filter: this.currentIndex + 1,
      };
      request
        .get(
          `index.php?s=/api/user.dealer.team/lists&wxapp_id=` +
            uni.getStorageSync("web_id"),
          data
        )
        .then((res) => {
          if (res.data.code == 1) {
            this.list = res.data.data.list.data;
            this.words = res.data.data.words;
            that.swiperhegiht(that.currentIndex);
          }
          setTimeout(() => {
            that.swiperhegiht(that.currentIndex);
          }, 300);
        });
    },
    jumpzuo() {
      uni.navigateBack();
    },
  },
};
</script>
<style>
@import "./my_tuandui.css";
</style>
